<template>
  <div class="table-box">
    <ProTable ref="proTable" title="轮播图列表" row-key="id" :indent="30" :columns="columns" :request-api="requestList">
      <!-- 表格 header 按钮 -->
      <template #direction="scope">
        <el-text class="mx-1" size="large" type="danger" v-if="scope.row.direction > 0">看涨</el-text>
        <el-text class="mx-1" size="large" type="success" v-else>看跌</el-text>
      </template>
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="toDetail(0)" v-auth="'create'">{{ $t("common.add") }}</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="order">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { orderList as requestList } from "@/api/modules/micro";
import { CirclePlus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { t } = useI18n();
const proTable = ref();

// 跳转详情页
const toDetail = (id: number) => {
  if (id) return router.push(`/micro/product/modify/${id}`);

  return router.push(`/micro/product/create`);
};

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "transaction_on", label: t("micro.order.transaction_on"), width: 220, search: { el: "input" } },
  { prop: "name", label: t("micro.product.name") },
  { prop: "amount", label: t("micro.order.amount") },
  { prop: "commission", label: t("micro.order.commission") },
  {
    prop: "direction",
    label: t("micro.order.direction"),
    enum: [
      { label: t("micro.order.rise"), value: 1 },
      { label: t("micro.order.fall"), value: 0 }
    ]
  },
  { prop: "market_start", label: t("micro.order.market_start") },
  { prop: "market_end", label: t("micro.order.market_end") },
  { prop: "amount_settlement", label: t("micro.order.amount_settlement") },
  {
    prop: "status",
    label: t("micro.order.status"),
    enum: [
      { label: t("micro.order.unsettled"), value: 10 },
      { label: t("micro.order.settled"), value: 20 }
    ]
  }
];

class Socket {
  protected url: string;
  protected link: any;
  protected timeout: any;
  protected Sleep: Number = 3000;
  protected callback: Function;

  constructor(url: string, callback: Function) {
    this.url = url;
    this.callback = callback ? callback : () => {};
    this.init();
  }

  protected start() {
    if (this.link == undefined) {
      try {
        this.link = new WebSocket(this.url);
        this.link.onerror = () => {
          this.error();
        };
        this.link.onopen = () => {
          this.send();
        };
        this.link.onmessage = ent => {
          this.message(ent);
        };
        this.link.onclose = () => {
          this.restart();
        };

        this.Sleep = 3000;
        if (this.timeout > 0) {
          clearTimeout(this.timeout);
          this.timeout = undefined;
        }
      } catch (e) {
        this.restart();
      }
    }
  }

  protected send() {
    if (this.timeout == undefined) {
      this.link.send("");
      setTimeout(() => {
        this.send();
      }, 1000);
    }
  }

  protected message(ent) {
    const data = JSON.parse(ent.data);
    this.callback(data);
  }
  protected error() {
    this.restart();
  }
  protected restart() {
    this.link = null;
    this.timeout = setTimeout(() => {
      this.start();
    }, this.Sleep);
    this.Sleep += this.Sleep;
  }

  protected init() {
    this.start();
  }
}

new Socket("ws://127.0.0.1:9502/ws/market", data => {
  proTable.value.tableData.forEach(item => {
    if (item.status != 10) return;
    data.forEach(market => {
      if (item.micro_product_id == market.micro_product_id) {
        item.market_end = market.market;
      }
    });
  });
});
</script>
